// vue 动画css
.left-enter-active,
.left-leave-active,
.right-enter-active,
.right-leave-active,
.bottom-enter-active,
.bottom-leave-active {
  transition: all 0.5s ease;
}
.left-enter-from,
.left-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

.right-enter-from,
.right-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.bottom-enter-from,
.bottom-leave-to {
  opacity: 0;
  transform: translateY(100%);
}

.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
